<script setup>

import {toPath} from "@/util/router/router";

const props = defineProps({
  blur: {
    type: Boolean,
    default: false
  },
  shadow: {
    type: Boolean,
    default: true
  },
  border: {
    type: Boolean,
    default: false
  },
  customStyle: {
    type: Object,
    default: () => ({})
  },
  obj: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <view class="card" :class="{'blur': blur, 'shadow': shadow, 'border':border}" :style="customStyle">
    <view v-if="obj?.title" class="flex-between l-40">
      <view class="f-c-9 u-f-sm">{{ obj.title }}</view>
      <up-icon name="arrow-right" size="18" @click="toPath(obj.path)" v-if="obj.path"></up-icon>
    </view>
    <slot></slot>
  </view>
</template>

<style lang="scss">
@import "@/static/css/theme.scss";
@import "@/static/css/index.css";

.card {
  background: $bg-color;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 30rpx;
  color: $text-color;
}

.shadow {
  box-shadow: 0 0 20rpx rgba(199, 199, 199, 0.2);
}

.border {
  border: 1rpx solid #e2e2e2;
}

.blur {
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx); /* Safari 兼容 */
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1rpx solid rgba(255, 255, 255, 0.1); /* 边框光泽 */
  box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.8); /* 阴影增强立体感 */
}
</style>